<template>
  <div class="app-container">
    <PageContent ref="contentRef" :content-config="contentConfig" @addClick="addClick" @edit-click="handleEditClick"
      @export-click="handleExportClick" @toolbarClick="handleToolbarClick" @operat-click="handleOperatClick">
      <template #is_super="scope">
        <el-tag :type="popularList[+scope.row[scope.prop]].type || ''">
          {{$t(popularList[+scope.row[scope.prop]].text) }}
        </el-tag>
      </template>
      <template #roles="scope">
        <div class="flex gap-2 flex-wrap">
          <template v-for="item in scope.row[scope.prop]">
            <el-tag>
              {{ item.name }}
            </el-tag>
          </template>
        </div>
      </template>
      <template #status="scope">
        <el-tag type="success" v-if="scope.row[scope.prop] === 'active'">{{ t('status.27') }}</el-tag>
        <el-tag type="danger" v-else>{{ t('status.28') }}</el-tag>
      </template>
    </PageContent>
    <!-- 新增 -->
    <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
      <template #roles="scope">
        <el-select multiple collapse-tags v-model="param[scope.prop]" @change="changeAdd(param,'add')">
          <template v-for="option in rolesList" :key="option.id">
            <el-option :label="option.name" :value="option.id" />
          </template>
        </el-select>
      </template>
    </page-modal>

    <!-- 编辑 -->
    <page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick">
      <template #roles="scope">
        <el-select multiple collapse-tags v-model="param[scope.prop]" @change="changeAdd(param,'edit')">
          <template v-for="option in rolesList" :key="option.id">
            <el-option :label="option.name" :value="option.id" />
          </template>
        </el-select>
      </template>
    </page-modal>
  </div>
</template>

<script setup>
import contentConfig from "./config/content";
import addModalConfig from "./config/add";
import editModalConfig from "./config/edit";
import usePage from "@/hooks/usePage";
import { onMounted } from "vue";
import Api from '@/api/system/manager'
import roleApi from '@/api/system/roles'
defineOptions({
  name: "systemManager",
  inheritAttrs: false,
});
const { t } = useI18n();
const {  contentRef, addModalRef, editModalRef,
  handleAddClick,
  handleSubmitClick, handleExportClick, } = usePage();
const popularList = {
  0: { text: "status.2", type: "success" },
  1: { text: "status.1", type: "danger" },
}
const addClick = () => {
  param.value.roles = []
  handleAddClick()
}
const handleEditClick = async (row) => {
  // const { data } = await Api.get(row.id)
  // param.value.roles = row.roles
  editModalRef.value?.setModalVisible(row);
  param.value.roles = []
  console.log(row.roles);
  if (row.roles) {
    for (let i in row.roles) {
      param.value.roles.push(row.roles[i].id)
    }
    editModalRef.value?.setModalVisible(param.value);
  }
}
// Api.get()
const changeAdd = (obj, type) => {
  if (type === 'edit') {
    editModalRef.value?.setModalVisible(obj);
  } else if (type === 'add') {
    addModalRef.value?.setModalVisible(obj);
  }
}
const param = ref({
  roles: []
})
const rolesList = ref([])
const getRolesList = async () => {
  const { data } = await roleApi.getList({ page: 1, per_page: 10 })
  rolesList.value = data
}
onMounted(() => {
  getRolesList()
})
</script>

<style></style>